<template>
    <div v-if="data !== null">
        <div class="box">
            <div class="imgBox">
                <el-image lazy :src="data.profile.avatarUrl"></el-image>
            </div>
            <div class="rightBox">
                <div class="nickname">{{ data.profile.nickname }}</div>

                <div class="levelSex">
                    <div class="sex">
                        性别: <el-image
                            :src="data.profile.gender === 1 ? require('../../assets/image/man.png') : require('../../assets/image/fulman.png')">
                        </el-image>
                        <div>加入时间:{{ data.createTime | dateFormat }}</div>
                        <div>生日:{{ data.profile.birthday | dateFormat2 }}</div>
                    </div>

                    <div class="btnBar">
                        <el-button v-if="data.userPoint.userId == myId" @click="edit()"><i class="el-icon-edit"></i>
                            编辑个人信息</el-button>
                        <el-button v-if="data.userPoint.userId != myId"><i class="el-icon-files"></i> 发私信</el-button>
                        <el-button v-if="data.userPoint.userId != myId" @click="followed()"><i
                                class="el-icon-plus"></i>{{
                                        data.profile.followed === true ? '取关' : '关注'
                                }}</el-button>
                    </div>
                </div>

                <div class="info">
                    <div class="infoData"
                        style="width:60px;display: flex;flex-direction: column;align-items: flex-start;">
                        <div style="width:32px;text-align: center;">{{ data.level }}</div>
                        <div>等级</div>
                    </div>

                    <div class="infoData" @click="fun()">
                        <div>{{ data.profile.followeds }}</div>
                        <div>粉丝</div>
                    </div>

                    <div class="infoData" style="border-right:0" @click="follows()">
                        <div>{{ data.profile.follows }}</div>
                        <div>关注</div>
                    </div>
                </div>

                <div class="signature">
                    <div>个人介绍:{{ data.profile.signature === "" ? '暂无介绍' : data.profile.signature }}</div>
                </div>

            </div>
        </div>

        <!-- 编辑个人信息的弹窗 -->
        <el-dialog title="编辑个人信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="editForm" ref="editFormRef" class="demo-ruleForm">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="editForm.nickname" size="medium" @input="change()"
                        :placeholder="data.profile.nickname"></el-input>
                </el-form-item>

                <el-form-item label="介绍" prop="signature">
                    <el-input v-model="editForm.signature" size="medium" type="textarea" maxlength="300"
                        :placeholder="data.profile.signature" show-word-limit @input="change2()"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio v-model="radio" label="1" @change="change2()">男</el-radio>
                    <el-radio v-model="radio" label="2" @change="change2()">女</el-radio>
                </el-form-item>


                <el-form-item label="生日" style="margin-top:30px">
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期" value-format="timestamp"
                        @change="change2()">
                    </el-date-picker>
                </el-form-item>
            </el-form>

            <div>修改头像</div>
            <div class="imgBox2">
                <div class="upload">
                    <input type="file" id="file" @change="upload">
                </div>
                <li v-for="(item, index) in pic" :key="index" class="img">
                    <img :src="item">
                    <div class="delect" @click="delect(index)">×</div>
                </li>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type='danger' @click="check()" :disabled="disabled">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 关注以及粉丝弹窗 -->
        <el-dialog :title="diaTitle" :visible.sync="dialogVisible2" width="800px" :before-close="handleClose2">
            <div class="folBox">
                <div v-for="item in followsData" :key="item.userId" class="FolItem" @click="userinfo(item.userId)">
                    <el-image lazy :src="item.avatarUrl"></el-image>
                    <div class="desc">
                        <div>{{ item.nickname }}</div>
                        <div>{{ item.signature !== null ? item.signature : '暂无介绍' }}</div>
                        <div class="num">
                            <div>歌单：{{ item.playlistCount }}</div>
                            <div>粉丝:{{ item.followeds }}</div>
                        </div>
                    </div>
                    <el-button><i class="el-icon-files"></i>私信</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(['cookie', 'userid']),
    },
    mounted() {
        if (this.cookie !== null) {
            this.getCookie = this.cookie.cookie
            this.uid = this.userid.userid
            this.getData()
        }
        this.myId = localStorage.getItem('uid')
    },
    watch: {
        cookie(newVal, oldVal) {
            this.getCookie = newVal.cookie
            this.uid = this.userid.userid
            this.getData()
        },
        userid(newVal, oldVal) {
            this.uid = newVal.userid
            this.getData()
        },
    },
    data() {
        return {
            uid: '',
            getCookie: '',
            data: null,
            dialogVisible: false,
            dialogVisible2: false,
            editForm: {
                nickname: '',
                signature: '',
            },
            radio: '1',
            value1: '',
            pic: [],
            disabled: true,
            formdata: '',
            width: '',
            diaTitle: '',
            followsData: [],
            myId: '',
        }
    },
    methods: {
        ...mapActions(['saveChange', 'saveUserId']),
        getData() {
            this.pic = []
            this.$api.userItem({ uid: this.uid, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
                this.data = ret
                this.editForm.nickname = this.data.profile.nickname
                this.value1 = this.data.profile.birthday
                this.radio = this.data.profile.gender.toString()
                this.pic.push(this.data.profile.avatarUrl)
            })
        },

        edit() {
            // 编辑
            this.dialogVisible = true
        },

        handleClose() {
            this.disabled = false
            this.dialogVisible = false
        },

        handleClose2() {
            this.followsData = []
            this.dialogVisible2 = false
        },

        async upload(e) {
            this.pic = []
            for (const item of e.target.files) {
                if (!/image\/\w+/.test(item.type)) {
                    // 提示只能是图片，return
                    alert('只能选择图片');
                    return;
                }
                var _this = this;
                const reader = new FileReader();
                reader.readAsDataURL(item);
                reader.addEventListener('load', function () {
                    _this.pic.push(this.result)
                })
                this.formdata = new FormData()
                this.formdata.append('imgFile', e.target.files[0]) // 将每一个文件图片都加进formdata
                this.width = await this.$utils.getImgSize(e.target.files[0])
                this.disabled = false
            }
        },

        delect(index) {
            this.pic.splice(index, 1);
        },

        change() {
            if (this.editForm.nickname !== this.data.profile.nickname) {
                this.disabled = false
                this.$api.checkNickName({ nickname: this.editForm.nickname, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
                    if (ret.duplicated === true) {
                        this.$message.error('昵称重复')
                    }
                })
            } else {
                this.disabled = true
            }
        },

        change2() {
            this.disabled = false
        },


        // 更新用户信息
        check() {
            if (this.pic[0] === this.data.profile.avatarUrl) {
                this.$api.editUser({ gender: this.radio, birthday: this.value1, nickname: this.editForm.nickname, signature: this.editForm.signature, cookie: this.getCookie }).then((ret) => {
                    if (ret.code === 200) {
                        this.getData()
                        this.saveChange({ change: true })
                        this.dialogVisible = false
                    }
                })
            } else if (this.pic[0] !== this.data.profile.avatarUrl) {
                this.$api.editUser({ gender: this.radio, birthday: this.value1, nickname: this.editForm.nickname, signature: this.editForm.signature, cookie: this.getCookie }).then((ret) => {
                    if (ret.code === 200) {
                        this.$api.editPic({ cookie: this.getCookie, timestamp: this.$utils.timestamp(), imgFile: this.formdata, imgSize: this.width.width }).then((res) => {
                            this.getData()
                            this.saveChange({ change: true })
                            this.dialogVisible = false
                        })
                    }
                })
            }
        },

        // 查看粉丝
        fun() {
            this.dialogVisible2 = true
            this.diaTitle = '关注我的人'
            this.$api.userFolloweds({ uid: this.uid, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
                this.followsData = ret.followeds
            })
        },

        // 获取关注列表
        follows() {
            this.dialogVisible2 = true
            this.diaTitle = '关注的人'
            this.$api.userFollows({ uid: this.uid, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
                this.followsData = ret.follow
            })
        },

        // 看用户的个人信息
        userinfo(e) {
            this.saveUserId({ userid: e })
            this.$router.push('/userPage');
            this.dialogVisible2 = false
        },

        // 关注或者取消关注
        followed() {
            this.$confirm('操作两次过后需要手机接收验证码才可重新操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                if (this.data.profile.followed === true) {
                    this.followedApi(2)
                } else {
                    this.followedApi(1)
                }
            })

        },

        followedApi(e) {
            this.$api.follow({ id: this.uid, t: e, cookie: this.getCookie, timestamp: this.$utils.timestamp() }).then((ret) => {
                if (ret.code === 200) {
                    this.$message({
                        message: ret.followContent,
                        type: 'success',
                    });
                    setTimeout(() => {
                        this.getData()
                    }, 1000);
                } else {
                    this.$message.error(ret.data.blockText)
                }
            })
        }
    },
}
</script>

<style scoped>
.box {
    margin-bottom: 20px;
}

.imgBox {
    width: 159px;
    height: 159px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #8d8888;
}

.imgBox .el-image {
    width: 159px;
    height: 159px;
    border-radius: 50%;
}

.box {
    display: flex;
    position: relative;
}

.rightBox {
    margin-left: 40px;
}

.nickname {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}


.sex .el-image {
    width: 20px;
    height: 20px;
}

.levelSex {
    margin-top: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.info {
    margin-top: 15px;
    display: flex;
    text-align: center;
}

.infoData {
    width: 100px;
    border-right: 1px solid black;
    cursor: pointer;
}

.infoData div:nth-child(1) {
    font-size: 20px;
}

.signature {
    margin-top: 15px;
}

.btnBar .el-button {
    height: 100%;
    border-radius: 20px;
}

.btnBar {
    display: flex;
    position: absolute;
    right: 20px;
}

.imgBox2 {
    display: flex;
    align-items: center;
}

li {
    list-style: none;
}

.upload {
    width: 80px;
    height: 80px;
    border: 1px dashed black;
    border-radius: 5px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.upload::before {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    content: '+';
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    user-select: none;
}

#file {
    width: 100%;
    height: 100%;
    opacity: 0;
}

.delect {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.5);
    user-select: none;
    cursor: pointer;
    opacity: 0;
}

.delect:hover {
    background-color: rgba(31, 31, 31, 0.5);
    color: white;
}

.img {
    width: 80px;
    height: 80px;
    margin-left: 15px;
    position: relative;
}

.img img {
    width: 80px;
    height: 80px;
}

.img .delect {
    opacity: 1;
}

.folBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.FolItem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
}

.FolItem .el-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.FolItem .el-button {
    width: 70px;
    height: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.desc {
    width: 50%;
    margin-left: 15px;
}

.desc :nth-child(1) {
    display: flex;
    margin-bottom: 5px;
}

.desc :nth-child(1),
.desc :nth-child(2) {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.num {
    margin-top: 5px;
    display: flex;
}
</style>
